<template>
  <div class="vipCharge-box">
    <nav-com
      title="选择会员"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <div class="vipBox">
      <div class="box box1">
        <div class="left">
          <div class="title">
            <div class="t0">会员版</div>
            <div class="t1">
              <img src="@/assets/vip/line.png" />
              <span>会员权益</span>
              <img src="@/assets/vip/line.png" />
            </div>
          </div>
          <div class="list">
            <div class="list-item">
              <img src="@/assets/vip/tu1.png" />
              <div class="item-text">
                <div class="text0">单聊主动</div>
                <div class="text1">
                  不限
                  <!-- {{
                    selectData1 && selectData1.single
                      ? selectData1.single + "个"
                      : "不限"
                  }} -->
                </div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu2.png" />
              <div class="item-text">
                <div class="text0">群聊</div>
                <div class="text1">
                  10个
                  <!-- {{
                    selectData1 && selectData1.group
                      ? selectData1.group + "个"
                      : "不限"
                  }} -->
                </div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu3.png" />
              <div class="item-text">
                <div class="text0">邀请建群</div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu4.png" />
              <div class="item-text">
                <div class="text0">开通使用<br>营销工具</div>
              </div>
            </div>
          </div>
          <div class="moreIntro" @click="tovipIntro">
            点击了解更多权益信息》
          </div>
        </div>
        <div class="right">
          <div class="r-title">购买会员版</div>
          <div class="r-list">
            <div
              class="r-list-item"
              :class="(item.enable==true&&i==selectInd1)?'active':item.enable==false?'disabled':''"
               v-for="(item, i) in dataList1"
              :key="i"
              @click="selectbox1(item, i)"
            >
              <div class="t0">{{ item.lable }}</div>
              <div class="t1">￥{{ item.price }}元</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box box2">
        <div class="left">
          <div class="title">
            <div class="t0">会员升级版</div>
            <div class="t1">
              <img src="@/assets/vip/line.png" />
              <span>会员权益</span>
              <img src="@/assets/vip/line.png" />
            </div>
          </div>
          <div class="list">
            <div class="list-item">
              <img src="@/assets/vip/tu1.png" />
              <div class="item-text">
                <div class="text0">单聊主动</div>
                <div class="text1">
                  不限
                  <!-- {{
                    selectData2 && selectData2.single
                      ? selectData2.single + "个"
                      : "不限"
                  }} -->
                </div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu2.png" />
              <div class="item-text">
                <div class="text0">群聊</div>
                <div class="text1">
                  500个
                  <!-- {{
                    selectData2 && selectData2.group
                      ? selectData2.group + "个"
                      : "不限"
                  }} -->
                </div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu3.png" />
              <div class="item-text">
                <div class="text0">邀请建群</div>
                <div class="text1">各种群福利</div>
              </div>
            </div>
            <div class="list-item">
              <img src="@/assets/vip/tu5.png" />
              <div class="item-text">
                <div class="text0">群机器人</div>
                <div class="text1">自动发信息</div>
              </div>
            </div>
          </div>
           <div class="moreIntro"  @click="tovipIntro">
            点击了解更多权益信息》
          </div>
        </div>
        <div class="right">
          <div class="r-title">购买升级版</div>
          <div class="r-list">
            <div
              class="r-list-item"
              :class="(item.enable==true&&i==selectInd2)?'active':item.enable==false?'disabled':''"
               v-for="(item, i) in dataList2"
              :key="i"
              @click="selectbox2(item, i)"
            >
              <div class="top-left" v-if="item.is_trial == 1">
                <img src="@/assets/vip/newimg.png" />
              </div>
              <div class="t0">{{ item.lable }}</div>
              <div class="t1">￥{{ item.price }}元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Popup, Toast } from "vant";
// import { Icon } from "vant";
import Upgrade from "@/component/upgrade.vue";
import { viplist, getuserInfo } from "@/api/api";
export default {
  name: "index",
  components: {
    navCom,
    Loading,
    Upgrade,
  },
  data() {
    return {
      showView: true,
      LOADING: true,
      curIndex: 0,
      dataList: [],
      dataList1: [],
      dataList2: [],
      exp_time: false,
      exp_desc: "",
      selectData: {},
      selectInd1: 0,
      selectInd2: 0,
    };
  },
  computed: {
    selectData1() {
      console.log(
        "selectData1",
        this.selectInd1,
        this.dataList1[this.selectInd1]
      );
      if (this.selectInd1 >= 0 && this.dataList1[this.selectInd1]) {
        return this.dataList1[this.selectInd1];
      }
    },
    selectData2() {
      if (this.selectInd2 >= 0 && this.dataList2[this.selectInd2]) {
        return this.dataList2[this.selectInd2];
      }
    },
  },
  created() {
    this.queryviplist(0);
    this.queryviplist(1);
  },
  mounted() {},
  methods: {
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    queryviplist(type) {
      this.dataList = [];
      //会员类型:0=会员版,1=升级版
      viplist({ vip_type: type }).then((res) => {
        if (res.data.code == 1) {
          this.exp_time = res.data.data.exp_time ? true : false;
          if (this.exp_time) {
            this.exp_desc = res.data.data.exp_time;
          }
          if (type == 0) {
            this.dataList1 = res.data.data.list;
            this.selectInd1 = this.dataList1[0];
          }
          if (type == 1) {
            this.dataList2 = res.data.data.list;
            this.selectInd2 = this.dataList2[0];
          }
        }
      });
    },
    selectbox1(item, ind) {
      if (item.enable) {
        this.selectData = item;
        this.selectInd1 = ind;
        this.openVip();
      } else {
        Toast("不可选");
      }
    },
    selectbox2(item, ind) {
      if (item.enable) {
        this.selectData = item;
        this.selectInd2 = ind;
        this.openVip();
      } else {
        Toast("不可选");
      }
    },
    tovipIntro(){
       this.$router.push("/vipIntro");
    },
    // 余额充值
    toRecharge() {
      this.$router.push("/viprecharge");
    },
    openVip() {
       console.log("selectData", this.selectData);
       localStorage.setItem(
                  "selectvipData",
                  JSON.stringify(this.selectData)
                );
      this.$dialog
        .alert({
          title: this.selectData.vip_type == "1" ? "升级版会员" : "会员版会员",
          message:
            "您已选择升级为：" +
            (this.selectData.vip_type == "1" ? "升级版会员" : "会员版会员") +
            this.selectData.lable,
          showCancelButton: true,
          cancelButtonText:'重新选择',
          confirmButtonColor:'#FF4050'
        })
        .then((result) => {
          getuserInfo().then((res) => {
            console.log("getuserInfo", res);
            if (res.data.code == 1) {
             let payprice=Number(this.selectData.jianmian)>0?this.selectData.price:this.selectData.price
              if (Number(res.data.data.price) >= Number(payprice)) {
                this.$router.push({
                  name: "vipPay",
                  params: this.selectData,
                });
              } else {
                this.toRecharge();
                
              }
            }
          });
        })
        .catch((err) => {});
    },
  },
};
</script>
<style scoped>
.vipCharge-box {
  background: #f8f8f8;
  height: 100vh;
}
.vipBox .box {
  margin: 10px;
  display: flex;
  text-align: center;
}
.vipBox .box1 {
  background: url("../../assets/vip/bg1.png") no-repeat;
  background-size: 100% 60vh;
}
.vipBox .box2 {
  background: url("../../assets/vip/bg2.png") no-repeat;
  background-size: 100% 60vh;
}
.vipBox .box .left {
  width: 50%;
  padding: 10px 4px;
}
.vipBox .box .left .title .t0 {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #881700;
  line-height: 26px;
}
.vipBox .box .left .title .t1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vipBox .box .left .title .t1 img {
  width: 30px;
}
.vipBox .box .left .title .t1 span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #575757;
  line-height: 22px;
  margin: 0 5px;
}
.vipBox .box .left .list {
  display: flex;
  flex-wrap: wrap;
}
.vipBox .box .left .list .list-item {
  background: #fce9db;
  border-radius: 5px;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(255, 252, 252, 0.82),
      rgba(255, 255, 255, 0.31)
    )
    1 1;
  padding: 10px 0;
  width: 46%;
  margin: 5px 5px 0 0;
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vipBox .box .left .list .list-item:nth-child(even) {
  margin-right: 0;
}
.vipBox .box .left .list .list-item img {
  width: 25px;
  height: 25px;
}
.vipBox .box .left .list .list-item .item-text .text0 {
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 20px;
  display: block;
}
.vipBox .box .left .list .list-item .item-text .text1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #575757;
  line-height: 18px;
  display: block;
}
.vipBox .box .right {
  flex: 1;
  padding: 10px;
}
.vipBox .box .right .r-title {
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7d2300;
  line-height: 26px;
  text-align: left;
  margin-bottom: 15px;
}
.r-list .r-list-item {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #fff6f6;
  border-radius: 5px;
  border: 1px solid #fa2c1e;
  height: 40px;
  width: 120px;
  margin-top: 10px;
  position: relative;
}
.top-left {
  position: absolute;
  top: -4px;
  left: 0;
}
.top-left img {
  width: 53px;
  height: 12px;
}
.r-list .r-list-item.active {
  background: #fa2c1e;
}
.r-list .r-list-item.active .t0,
.r-list .r-list-item.active .t1 {
  color: #ffffff;
}
.r-list .r-list-item.disabled{
background: #F4F4F4;
border-color: #F4F4F4!important;
}
.r-list .r-list-item.disabled .t0,
.r-list .r-list-item.disabled .t1 {
  color: #FFFFFF;
}
.r-list .r-list-item .t0 {
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fa2c1e;
  line-height: 25px;
}
.r-list .r-list-item .t1 {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fa2c1e;
  line-height: 20px;
}
.moreIntro{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
width: 100%;
    height: 30px;
    border-radius: 6px;
    line-height: 30px;
    margin-top: 10px;
}
.box1 .moreIntro{
  background: linear-gradient(140deg, #E5956E 0%, #AC5D3B 100%);
}
.box2 .moreIntro{
  background: linear-gradient(140deg, #F7CB8B 0%, #DC944F 100%);
}
</style>